<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片预览</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/common.css">
    <style>
        .photo-gallery {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        .photo-item {
            aspect-ratio: 1;
            background-color: #eee;
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }
        .photo-modal {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 50;
            display: none;
            align-items: center;
            justify-content: center;
        }
        .photo-modal.active {
            display: flex;
        }
        .photo-modal img {
            max-width: 100%;
            max-height: 80vh;
        }
        .photo-modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 24px;
        }
        .photo-modal-nav {
            position: absolute;
            bottom: 20px;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            gap: 10px;
        }
        .photo-modal-nav-item {
            width: 30px;
            height: 6px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
        }
        .photo-modal-nav-item.active {
            background-color: white;
        }
        .photo-select {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: white;
            border: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            color: transparent;
            z-index: 2;
        }
        .photo-select.selected {
            background-color: #fd79a8;
            border-color: #fd79a8;
            color: white;
        }
        .tab-menu {
            display: flex;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 16px;
        }
        .tab-item {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            font-size: 15px;
            color: #666;
        }
        .tab-item.active {
            color: #fd79a8;
            border-bottom: 2px solid #fd79a8;
            font-weight: 500;
        }
        .watermark {
            position: absolute;
            bottom: 5px;
            right: 5px;
            font-size: 10px;
            color: rgba(255, 255, 255, 0.7);
            background-color: rgba(0, 0, 0, 0.3);
            padding: 2px 4px;
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <div class="wechat-container">
        <div class="wechat-header">
            <div class="wechat-back">
                <i class="fas fa-chevron-left"></i>
            </div>
            照片预览
        </div>
        
        <div class="wechat-content">
            <!-- Photographer Info -->
            <div class="wechat-card flex items-center gap-3">
                <div class="wechat-avatar-sm">
                    <i class="fas fa-user"></i>
                </div>
                <div>
                    <div class="font-bold">林夕摄影</div>
                    <div class="text-xs text-gray">基础写真套餐</div>
                </div>
                <div class="text-sm text-gray ml-auto">
                    订单号: P202406150034
                </div>
            </div>
            
            <!-- Tab Menu -->
            <div class="tab-menu">
                <div class="tab-item active">全部照片 (15)</div>
                <div class="tab-item">已选照片 (3)</div>
            </div>
            
            <!-- Action Bar -->
            <div class="flex justify-between items-center mb-4">
                <div class="text-sm">
                    <span class="text-pink font-bold">3</span> 张已选择
                </div>
                <div class="flex gap-2">
                    <button class="bg-white border border-gray-300 text-sm px-3 py-1 rounded">
                        <i class="fas fa-share-alt mr-1"></i>
                        分享
                    </button>
                    <button class="bg-pink-100 text-pink border border-pink-200 text-sm px-3 py-1 rounded">
                        <i class="fas fa-download mr-1"></i>
                        下载
                    </button>
                </div>
            </div>
            
            <!-- Photo Gallery -->
            <div class="photo-gallery">
                <div class="photo-item">
                    <div class="photo-select selected">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select selected">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select selected">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
                <div class="photo-item">
                    <div class="photo-select">
                        <i class="fas fa-check"></i>
                    </div>
                    <i class="fas fa-image"></i>
                    <div class="watermark">林夕摄影</div>
                </div>
            </div>
            
            <!-- Package Info -->
            <div class="wechat-card mt-6">
                <h3 class="font-bold mb-2">套餐信息</h3>
                <div class="text-sm text-gray">
                    您的基础写真套餐包含15张精修照片，请选择您需要精修的照片。
                </div>
                <div class="text-sm text-gray mt-2">
                    已选择: <span class="text-pink font-bold">3</span> / 15 张
                </div>
                <div class="wechat-divider"></div>
                <div class="text-sm">
                    <div class="mb-1">精修后的照片将在 <span class="font-bold">24小时</span> 内发送到您的微信</div>
                    <div>如需购买额外精修，可联系摄影师</div>
                </div>
            </div>
            
            <!-- Action Buttons -->
            <div class="flex gap-3 mt-6">
                <button class="wechat-btn wechat-btn-outline flex-1">
                    <i class="fas fa-comments mr-1"></i>
                    联系摄影师
                </button>
                <button class="wechat-btn flex-1">
                    <i class="fas fa-check mr-1"></i>
                    确认选择
                </button>
            </div>
        </div>
    </div>
    
    <!-- Photo Modal (Hidden) -->
    <div class="photo-modal">
        <div class="photo-modal-close">
            <i class="fas fa-times"></i>
        </div>
        <img src="assets/images/placeholder.jpg" alt="Photo preview">
        <div class="photo-modal-nav">
            <div class="photo-modal-nav-item"></div>
            <div class="photo-modal-nav-item active"></div>
            <div class="photo-modal-nav-item"></div>
            <div class="photo-modal-nav-item"></div>
            <div class="photo-modal-nav-item"></div>
        </div>
    </div>
</body>
</html> 